import React from 'react'
import { Card } from 'antd'
import styles from '@/views/overview/index.module.scss'
import { Pie } from '@ant-design/plots';
interface propsData {
  data: any;
}

const DataBox: React.FC<propsData> = ({ data }) => {
  console.log(data)
  const currentDate = new Date().toLocaleDateString()
  const pieData = [
    { type: '禁烟区吸烟', value: 60 },
    { type: '自燃', value: 34 },
    { type: '消防通道堵塞', value: 32 },
    { type: '车辆占用消防通道', value: 46 },
    { type: '设施', value: 41 },
    { type: '车辆禁行区域行驶', value: 42 },
  ];
  const config = {
    data: pieData,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    label: {
      text: 'type',
      position: 'outside',
    },
    interactions: [{ type: 'element-active' }],
    legend: {
      color: {
        title: false,
        cols: 1,
        layout: {
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'column',
        },
        flexDirection: 'column',
        position: 'bottom',
        rowPadding: 10,
        itemLabelFontSize: 14,
        itemLabelText: (datum) =>{
          let tagName = ''
          if (typeof datum === 'string') {
            tagName = datum
          } else if (typeof datum === 'object') {
            tagName = datum.label
          }
          const node = pieData.find((item) => item.type === tagName)
          return `${tagName}报警统计${node.value}次`
        }
      }
    },
    autoFit: true
  };
  return (
    <Card className={styles['gam-box']} title="30天报警统计" style={{ height: '100%' }} extra={<span>{currentDate}</span>}>
      <Pie autoFit={true} {...config} marginTop={-30} marginLeft={-30} radius={0.6} height={400}/>
    </Card>
  )
}

export default DataBox
